import React,{Component} from 'react';
import {Form,Input,Select,Radio,Button,Card,Upload,Message,Table,Loading}from 'element-react';
import {connect}from 'react-redux';
import TableInput from './tableinput';
import TableRadio from './tableradio';
import TableStatus from './tablestatus';
import {UploadFile} from '../../actions/addAddress';

export class BulkImport extends Component{
	constructor(props){
		super(props);
		this.state={
		...props.import,
		columns:[
		{label:'姓名',prop:'username',width:150,render:this.tableInput.bind(this,'username')},
		{label:'性别',prop:'username',width:150,render:this.tableRadio.bind(this,'gender')},
		{label:'部门',prop:'username',width:150,render:this.tableInput.bind(this,'department')},
		{label:'职务',prop:'username',width:150,render:this.tableInput.bind(this,'title')},
		{label:'手机号',prop:'username',width:150,render:this.tableInput.bind(this,'mobilenumber')},
		{label:'电话',prop:'username',width:150,render:this.tableInput.bind(this,'telephone')},
		{label:'电子邮箱',prop:'username',width:150,render:this.tableInput.bind(this,'email')},
		{label:'工资卡号',prop:'username',width:150,render:this.tableInput.bind(this,'cardnumber')},
		{label:'归属银行',prop:'username',width:150,render:this.tableInput.bind(this,'bankname')},
		{label:'状态',prop:'status',width:100,fixed:'right',render:this.tableStatus.bind(this)}
        ]
		}
	}

	tableInput(key,d){
		let oldData=d;
		return (
			<TableInput data={d[key]} change={(v)=>{
			  let oldList=this.tableData;
			for(let i in oldList){
				if(oldData===oldList[i]){
					oldList[i][key]=v;
				}
			}
			this.tableData = oldList;
		}}/>
	)}

	tableRadio(key,d){
		let oldData=d;
		return <TableRadio data={d[key]} change={(v)=>{
			let oldList = this.tableData;
			for(let i in oldList){
				if(oldData===oldList[i]){
				   oldList[i][key]=v;
				}
			}
			this.tableData = oldList;
		}}/>
	}

	tableStatus(data){
    return <TableStatus status={data['status']} error={data['error']}/>
	}
	handlePreview(file){
		console.log('preview');
	}
	handleAvatarSuccess(res,file){
		console.log('success');
	}
	beforeAvatarUpload(file){
		let name=file.name,
			begin=name.lastIndexOf('.'),
			end=name.length,
			extension=name.substring(begin+1,end);
		if(extension==='xls'||extension==='xlsx'){
			this.props.dispatch(UploadFile());
			return true;
		}else{
			Message('只支持上传excel文件！');
			this.refs.upload.clearFiles();
			return false;
		}
	}
	onSubmit(){
		// this.setState({
		// 	fullscreen:true,
		// })
		console.log(this.tableData);
	}
	render(){
		let data=this.props.import.data;
		this.tableData = data;
		return(
			<Card className='box-card' header={
				 <div className="clearfix">
					 <Upload
						ref='upload'
						className='upload-demo'
						action="//jsonplaceholder.typicode.com/posts/"
						onPreview={file=>this.handlePreview(file)}
						onSuccess={(res,file)=>this.handleAvatarSuccess.bind(this)}
						beforeUpload={file=>this.beforeAvatarUpload(file)}
						tip={<div className='el-upload_tip margin-top-20'>只能上传Excel文件</div>}>
					<Button size='small' type='primary'>点击上传</Button>
					</Upload>
				 </div> }>
				<Table style={{width:'100%'}}
			       columns={this.state.columns}
				   data={data}
				   maxHeight={400}
				   height={400}
				 >
				 </Table>
				<div className='item form-item margin-top-20'>
					 <Button type='primary' onClick={this.onSubmit.bind(this)}>提交</Button>
				</div>
				{
				 this.state.fullscreen?(<Loading text='提交中...' fullscreen={true}/>):(<div/>)
				 }
			</Card>
		)
	}
}
const mapStateToProps=(state)=>{
	return {
		import:state.addressimport
	}
};
export default connect(mapStateToProps)(BulkImport);
